import { defineComponent, ref } from 'vue';
// import LucideIcon from '/@/components/common/LucideIcon.vue'
import EventEmitter from '/@/utils/bpmn/EventEmitter';
import type Modeler from 'bpmn-js/lib/Modeler';
import type Canvas from 'diagram-js/lib/core/Canvas';
import { CanvasEvent } from 'diagram-js/lib/core/EventBus';
import { useI18n } from '/@/hooks/web/useI18n';
import { Icon } from '/@/components/Icon';
import HlTooltip from './tooltip';

const Scales = defineComponent({
  name: 'Scales',
  setup() {
    const { t } = useI18n();
    const currentScale = ref(1);
    let canvas: Canvas | null = null;

    EventEmitter.on('modeler-init', (modeler: Modeler) => {
      try {
        canvas = modeler.get<Canvas>('canvas');
        currentScale.value = canvas.zoom();
      } finally {
        modeler.on('canvas.viewbox.changed', ({ viewbox }: CanvasEvent<any>) => {
          currentScale.value = viewbox.scale;
        });
      }
    });

    const zoomReset = (newScale: number | string) => {
      canvas && canvas.zoom(newScale, newScale === 'fit-viewport' ? 'auto' : { x: 0, y: 0 });
    };

    const zoomOut = (newScale?: number) => {
      currentScale.value = newScale || Math.floor(currentScale.value * 100 - 0.1 * 100) / 100;
      zoomReset(currentScale.value);
    };

    const zoomIn = (newScale?: number) => {
      currentScale.value = newScale || Math.floor(currentScale.value * 100 + 0.1 * 100) / 100;
      zoomReset(currentScale.value);
    };

    return () => (
      <div className="scales hl-group">
        <div className="hl-group-item" onClick={() => zoomOut()}>
          <HlTooltip title={t('routes.bpmn.zoomOut')}>
            <Icon icon="lucide:zoom-out" />
          </HlTooltip>
        </div>
        <div className="flex self-center resize" onClick={() => zoomReset('fit-viewport')}>
          <HlTooltip title={t('routes.bpmn.zoomReset')}>
            <span>{Math.floor(currentScale.value * 10) * 10 + '%'}</span>
          </HlTooltip>
        </div>
        <div className="hl-group-item" onClick={() => zoomIn()}>
          <HlTooltip title={t('routes.bpmn.zoomIn')}>
            <Icon icon="lucide:zoom-in" />
          </HlTooltip>
        </div>
      </div>
    );
  },
});

export default Scales;
